<template>
  <el-dialog title="这里是标题" :visible.sync="dialogVisible" width="40%" custom-class="customclass">
    <el-row>
      <el-col :span="12" class="dividerLeft">
          <div class="imgWrap">
            <img class="imgClass" :src="dialogData.partUrl" />
          </div>
          <div class="descWrap">
            <div class="descClass">
              <div class="">部件名称：<span v-text="dialogData.partName"></span></div>
              <div class="">负责单位：<span v-text="dialogData.partUnit"></span></div>
            </div>
          </div>
      </el-col>
      <el-col :span="12" class="dividerRight">
        <el-input v-model="dialogData.partProps.cont1" :disabled="true" class="iptClass">
          <template slot="prepend">建立时间</template>
        </el-input>
        <el-input v-model="dialogData.partProps.cont2" :disabled="true" class="iptClass">
          <template slot="prepend">主要用途</template>
        </el-input>
        <el-input v-model="dialogData.partProps.cont3" :disabled="true" class="iptClass">
          <template slot="prepend">内容3</template>
        </el-input>
        <el-input v-model="dialogData.partProps.cont4" :disabled="true" class="iptClass">
          <template slot="prepend">内容4</template>
        </el-input>
        <el-input v-model="dialogData.partProps.cont5" :disabled="true" class="iptClass">
          <template slot="prepend">内容5</template>
        </el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'info-dialog',
  data () {
    return {
      dialogVisible: false,
      dialogData: {
        partUrl: require('../../Static/assets/images/1.png'),
        partName: '我的名字',
        partUnit: '我的负责单位',
        partProps: {
          cont1: 'cont1',
          cont2: 'cont2',
          cont3: 'cont3',
          cont4: 'cont4',
          cont5: 'cont5'
        }
      }
    }
  },
  methods: {
    propShow () {
      this.dialogVisible = true
    }
  }
}
</script>

<style>
.imgWrap {
  margin: 10px auto;
  width: 120px;
  height: 120px;
  text-align: center;
}

.imgWrap img{
  width: 100%;
  height: 100%;
}

.descWrap {
  text-align: center;
}

.descClass {
  color: #6fd3ff;
  line-height: 16px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
}

.descClass div {
  padding: 10px;
  text-align: left;
}

.descClass span {
  color: #606266;
  text-decoration: none;
}

.dividerLeft {
  padding-right: 10px;
  border-right: 1px solid #eee;
}

.dividerRight {
  padding-left: 10px;
  border-left: 1px solid #eee;
}

.iptClass {
  margin-bottom: 5px;
}
</style>
